<template>
    <div class="chat-container">
        <header class="chat-header">
            <h1>智能分析</h1>
            <div class="chat-description">
                使用AI智能分析功能，系统已知晓所选直播间数据的详细信息，您可以与系统进行对话，以获取有关您数据的详细分析结果。
            </div>
        </header>

        <div class="chat-messages" ref="chatContainer">
            <div v-for="(message, index) in messages" :key="index"
                :class="['message', { 'user-message': message.isUser }]">
                <div class="message-content">
                    <!-- 使用图标替代头像 -->
                    <div :class="['avatar', message.isUser ? 'user-avatar' : 'ai-avatar']">
                        <el-icon v-if="message.isUser">
                            <User />
                        </el-icon>
                        <el-icon v-else>
                            <Monitor />
                        </el-icon>
                    </div>
                    <div class="message-text">{{ message.content }}</div>
                </div>
            </div>
            <div v-if="isLoading" class="loading-container">
                <el-icon class="is-loading">
                    <Loading />
                </el-icon>
            </div>
        </div>

        <div class="chat-input">
            <!-- 使用原生input和button替换Element Plus组件 -->
            <div class="input-container">
                <input v-model="userInput" placeholder="在此输入消息..." @keyup.enter="sendMessage" class="message-input" />
                <button @click="sendMessage" :disabled="!userInput.trim()" class="send-button">
                    <el-icon>
                        <ChatLineRound />
                    </el-icon>
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, nextTick, getCurrentInstance, defineProps } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { Loading, User, Monitor, ChatLineRound } from '@element-plus/icons-vue'

const { appContext } = getCurrentInstance();
const HOST_URL = appContext.config.globalProperties.$HOST_URL;
const props = defineProps({
    room_id: String,
    analyzed_date: String
});

let userInput = ref('')
let messages = ref([])
let isLoading = ref(false)
let chatContainer = ref(null)

const sendMessage = async () => {
    if (userInput.value.trim() === '') return

    // 添加用户消息
    messages.value.push({ content: userInput.value, isUser: true })

    // 清空输入框并显示加载状态
    const userMessage = userInput.value
    userInput.value = ''
    isLoading.value = true

    // 滚动到底部
    await nextTick()
    chatContainer.value.scrollTop = chatContainer.value.scrollHeight

    try {
        // 发送请求到服务器
        const response = await axios.post(`${HOST_URL}/init/chat/api`, {
            message: userMessage,
            room_id: props.room_id,
            analyze_time: props.analyzed_date
        })

        // 添加服务器响应
        messages.value.push({ content: response.data.message, isUser: false })
    } catch (error) {
        console.error('错误:', error)
        ElMessage.error('请求发生错误。请重试。')
    } finally {
        isLoading.value = false
        // 响应后再次滚动到底部
        await nextTick()
        chatContainer.value.scrollTop = chatContainer.value.scrollHeight
    }
}
</script>

<style scoped>
.chat-description {
    /* 向下移动 */
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #666;
}

/* 聊天容器样式 */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 86vh;
    background-color: #f0f2f5;
    font-family: Arial, sans-serif;
}

/* 聊天头部样式 */
.chat-header {
    background-color: #ffffff;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chat-header h1 {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}

/* 聊天消息区域样式 */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.message {
    margin-bottom: 1rem;
}

.message-content {
    display: flex;
    align-items: flex-start;
}

.message-text {
    background-color: #ffffff;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    margin-left: 0.5rem;
    max-width: 80%;
}

/* 用户消息样式 */
.user-message .message-content {
    flex-direction: row-reverse;
}

.user-message .message-text {
    background-color: #dcf8c6;
    margin-left: 0;
    margin-right: 0.5rem;
}

/* 头像样式 */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.user-avatar {
    background-color: #007bff;
}

.ai-avatar {
    background-color: #28a745;
}

/* 加载动画样式 */
.loading-container {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

/* 输入区域样式 */
.chat-input {
    padding: 1rem;
    background-color: #ffffff;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.input-container {
    display: flex;
    align-items: center;
}

/* 输入框样式 */
.message-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid #dcdfe6;
    border-radius: 20px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

.message-input:focus {
    border-color: #007bff;
}

/* 发送按钮样式 */
.send-button {
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-left: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.send-button:hover {
    background-color: #0056b3;
}

.send-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}
</style>